import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 全局面包屑状态
const breadcrumbHistory = ref([])

export function useBreadcrumb() {
  const route = useRoute()
  const router = useRouter()

  // 路由标题映射
  const routeTitleMap = {
    '/': '首页',
    '/users': '用户管理',
    '/statistics': '统计报表',
    '/attractions': '景点管理',
    '/activities': '活动管理',
    '/orders': '订单管理',
    '/settings': '系统设置',
    '/profile': '个人中心'
  }

  // 获取路由标题
  const getRouteTitle = (path, routeName) => {
    // 优先使用路由元信息中的标题
    if (route.meta?.title) {
      return route.meta.title
    }
    
    // 特殊路由处理
    if (path.startsWith('/users/') && routeName === 'UserDetail') {
      return '用户详情'
    }
    
    // 使用映射表
    return routeTitleMap[path] || '未知页面'
  }

  // 添加面包屑项
  const addBreadcrumb = (path, title) => {
    const existingIndex = breadcrumbHistory.value.findIndex(item => item.path === path)
    
    if (existingIndex > -1) {
      // 如果已存在，移除该项及其后面的所有项
      breadcrumbHistory.value = breadcrumbHistory.value.slice(0, existingIndex)
    }
    
    // 添加新项
    breadcrumbHistory.value.push({
      path,
      title,
      timestamp: Date.now()
    })
    
    // 限制历史记录长度
    if (breadcrumbHistory.value.length > 10) {
      breadcrumbHistory.value = breadcrumbHistory.value.slice(-10)
    }
  }

  // 生成当前页面的面包屑
  const generateBreadcrumbs = () => {
    const items = []
    const currentPath = route.path
    const currentTitle = getRouteTitle(currentPath, route.name)
    
    // 根据当前路径生成层级面包屑
    if (currentPath.startsWith('/users')) {
      // 用户管理模块
      if (currentPath !== '/users') {
        items.push({ title: '用户管理', path: '/users' })
      }
      
      if (currentPath.includes('/users/') && route.name === 'UserDetail') {
        items.push({ title: '用户详情', path: currentPath })
      } else if (currentPath === '/users') {
        items.push({ title: '用户管理', path: '/users' })
      }
    } else if (currentPath.startsWith('/statistics')) {
      items.push({ title: '统计报表', path: '/statistics' })
    } else if (currentPath.startsWith('/attractions')) {
      items.push({ title: '景点管理', path: '/attractions' })
    } else if (currentPath.startsWith('/activities')) {
      items.push({ title: '活动管理', path: '/activities' })
    } else if (currentPath.startsWith('/orders')) {
      items.push({ title: '订单管理', path: '/orders' })
    } else if (currentPath.startsWith('/settings')) {
      items.push({ title: '系统设置', path: '/settings' })
    } else if (currentPath === '/profile') {
      items.push({ title: '个人中心', path: '/profile' })
    } else if (currentPath === '/account/settings') {
      items.push({ title: '账号设置', path: '/account/settings' })
    } else if (currentPath.startsWith('/test')) {
      if (currentPath === '/test/wechat-cloud') {
        items.push({ title: '微信云测试', path: '/test/wechat-cloud' })
      }
    } else if (currentPath !== '/') {
      // 其他页面
      items.push({ title: currentTitle, path: currentPath })
    }
    
    return items
  }

  // 当前面包屑项
  const breadcrumbItems = computed(() => {
    return generateBreadcrumbs()
  })

  // 导航到指定路径
  const navigateTo = (path) => {
    router.push(path)
  }

  // 返回上一页
  const goBack = () => {
    if (breadcrumbHistory.value.length > 1) {
      const previousItem = breadcrumbHistory.value[breadcrumbHistory.value.length - 2]
      navigateTo(previousItem.path)
    } else {
      router.back()
    }
  }

  // 清空面包屑历史
  const clearBreadcrumbHistory = () => {
    breadcrumbHistory.value = []
  }

  // 获取面包屑历史
  const getBreadcrumbHistory = computed(() => {
    return breadcrumbHistory.value
  })

  return {
    breadcrumbItems,
    breadcrumbHistory: getBreadcrumbHistory,
    addBreadcrumb,
    navigateTo,
    goBack,
    clearBreadcrumbHistory,
    getRouteTitle
  }
}
